<template>
  <div>
    <search-bar />
    <div class="back">
      <div @click="back()">
        <i class="iconfont icon-lujing"></i>
        返回
      </div>
    </div>
    <div class="content">
      <div class="left">
        <div class="person">
          <div class="person-tags">
            <el-tabs v-model="activeName" @tab-click="handleClick">
              <el-tab-pane label="我的贴子" class="article" name="first">
                <div class="nocomment" v-if="postsListData.lenght == 0">
                  <img src="@/assets/img/dev_nocomments@2x.png" alt="" />
                  <div class="nocomment-text">
                    <div class="nocomment-text-left">暂无贴子</div>
                    <router-link class="nocomment-text-right" to="/add"
                      >我要发帖</router-link
                    >
                  </div>
                </div>
                <div class="article-list" v-else>
                  <div
                    class="item"
                    v-for="item in postsListData"
                    :key="item.id"
                  >
                    <div class="title">
                      <div class="name">
                        <router-link
                          :to="'/article/' + item.id"
                          v-text="item.title"
                        />
                      </div>
                      <div class="tag">{{ item.labelName }}</div>
                    </div>
                    <div class="item-content">
                      <router-link
                        :to="'/article/' + item.id"
                        class="item-content-img"
                        v-if="item.image"
                      >
                        <img :src="item.image" alt="" />
                      </router-link>
                      <router-link
                        :to="'/article/' + item.id"
                        class="item-content-article"
                        v-html="formatter(item.text)"
                      />
                      <div style="clear: both"></div>
                    </div>
                    <div class="item-bottom">
                      <div class="like">
                        <i class="iconfont icon-zan"></i>
                        <span>赞 {{ item.thumbsUpCount }}</span>
                      </div>
                      <div class="comment">
                        <i class="iconfont icon-huifu"></i>
                        <span>评论 {{ item.evaluateCount }}</span>
                      </div>
                      <div class="delete" @click="deletearticle('1')">
                        <span>删除</span>
                      </div>
                      <div class="time">
                        <i class="iconfont icon-shijian"></i>
                        <span>2020-12-02 14:20</span>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="article-page">
                  <el-pagination
                    background
                    layout="prev, pager, next"
                    :total="1000"
                    class="center"
                  >
                  </el-pagination>
                </div>
              </el-tab-pane>
              <el-tab-pane label="我的评论" class="reply" name="second">
                <!-- 123123 -->
                <div class="nocomment" v-if="evaluateData.length == 0">
                  <img src="@/assets/img/dev_nocomments@2x.png" alt="" />
                  <div class="nocomment-text">
                    <div class="nocomment-text-left">暂无评论</div>
                  </div>
                </div>
                <div class="article-list" v-else>
                  <div class="item" v-for="item in evaluateData" :key="item.id">
                    <div class="title">
                      <div class="name">
                        <router-link :to="'/article/' + item.id">{{
                          item.title
                        }}</router-link>
                      </div>
                      <div class="tag">{{ item.labelName }}</div>
                    </div>
                    <div class="item-content">
                      <div class="item-content-img">
                        <img src="@/assets/img/avatar.jpg" alt="" />
                      </div>
                      <div
                        class="item-content-article"
                        v-html="formatter(text)"
                      ></div>
                      <div style="clear: both"></div>
                    </div>
                    <div class="item-bottom">
                      <div class="avatar">
                        <img :src="item.logo" alt="" />
                        <span class="username">{{ item.accountName }}</span>
                      </div>
                      <div class="like">
                        <i class="iconfont icon-zan"></i>
                        <span>赞 {{ item.thumbsUpCount }}</span>
                      </div>
                      <div class="comment">
                        <i class="iconfont icon-huifu"></i>
                        <span>评论 {{ item.evaluateCount }}</span>
                      </div>
                      <div class="time">
                        <i class="iconfont icon-shijian"></i>
                        <span>{{ getLocalTime(item.gmtCreate) }}</span>
                      </div>
                    </div>
                    <!-- 文章后的自己的回复 -->
                    <div class="item-comment" ref="comment">
                      <div
                        class="item"
                        v-for="child in item.evaluates"
                        :key="child.id"
                      >
                        <div class="item-header">
                          <div class="avatar">
                            <img :src="child.logo" alt="" />
                            <span class="username">{{
                              child.accountName
                            }}</span>
                          </div>
                          <div class="time">
                            <span>{{ getLocalTime(child.gmtCreate) }}</span>
                          </div>
                        </div>
                        <div class="item-content">
                          {{ child.content }}
                          <div class="item-delete" @click="deletecomment()">
                            删除
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="article-page">
                  <el-pagination
                    background
                    layout="prev, pager, next"
                    :total="1000"
                    class="center"
                  >
                  </el-pagination></div
              ></el-tab-pane>
            </el-tabs>
          </div>
        </div>
      </div>
      <div class="r">
        <div class="right">
          <div class="userinfo">
            <div class="nologin" style="display: none">
              <div class="avatar">
                <i class="iconfont icon-touxiang"></i>
              </div>
              <div class="login">前往登录</div>
              <p>参与发帖互动，发现更多精彩内容</p>
            </div>
            <div class="loginstate">
              <router-link to="/person" class="avatar">
                <img :src="avatar" alt="" />
              </router-link>
              <div class="uername">{{ name }}</div>
              <div class="mine">
                <router-link to="/person/article">
                  <div class="num">{{ myPostCount }}</div>
                  <div class="text">我的贴子</div>
                </router-link>
                <router-link to="/person/reply">
                  <div class="num">{{ myEvaluateCount }}</div>
                  <div class="text">我的评论</div>
                </router-link>
              </div>
            </div>
            <router-link class="post-article" to="/add">
              <div class="text">前往发帖</div>
            </router-link>
            <!-- <div class="post-article">前往发帖</div> -->
          </div>
        </div>
      </div>
      <div style="clear: both; float: none"></div>
    </div>
    <el-dialog :visible.sync="delete_Visible" width="397px">
      <span class="delete-text">确定要删除此条内容吗？</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="delete_Visible = false">取 消</el-button>
        <el-button type="primary" @click="delete_Visible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
var _this;

import Search from "@/components/Search";
import { getLocalTime } from "@/utils";
import { postsList } from "@/api/home";
import { getEvaluate } from "@/api/evaluate";

import { mapState, mapMutations } from "vuex";

export default {
  name: "Home",
  components: {
    SearchBar: Search,
  },
  data() {
    return {
      text: `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Commodo
                in imperdiet amet, fringilla feugiat. Semper habitant pretium,
                felis velit massa tristique mattis. At ultrices et feugiat at.
                Elit nibh nisi, accumsan a orci liberoAt ultrices et feugiat at.
                Elit nibh nisi. Lorem ipsum dolor sit amet, consectetur
                adipiscing elit. Commodo in imperdiet amet, fringilla feugiat.
                Semper habitant pretium, felis velit massa tristique mattis. At
                ultrices et feugiat at. Elit nibh nisi, accumsan a orci liberoAt
                ultrices et feugiat at. Elit nibh nisi.elit. Commodo in imperdiet amet, fringilla feugiat.
                Semper habitant pretium, felis velit massa tristique mattis. At
                ultrices et feugiat at. Elit nibh nisi, accumsan a orci liberoAt
                ultrices et feugiat at. Elit nibh nisi.Elit nibh nisi, accumsan a orci liberoAt ultrices et feugiat at.
                Elit nibh nisi. Lorem ipsum dolor sit amet, consectetur
                adipiscing elit. Commodo in imperdiet amet, fringilla feugiat.
                Semper habitant pretium, felis velit massa tristique mattis. At
                ultrices et feugiat at. Elit nibh nisi, accumsan a orci liberoAt
                ultrices et feugiat at. Elit nibh nisi.elit. Commodo in imperdiet amet, fringilla feugiat.
                Semper habitant pretium, felis velit massa tristique mattis. At
                ultrices et feugiat at. Elit nibh nisi, accumsan a orci liberoAt
                ultrices et feugiat at. Elit nibh nisi.`,
      activeName: "second", // first 是我的贴子  second 是我的回复
      delete_Visible: false,
      postsListFrom: {
        pageNum: 1,
        pageSize: 20,
        labelId: 0, // 我的贴子就是获取全部
        // title: _this.title, // 不需要title
      },
      postsListData: [],
      evaluateForm: {
        pageNum: 1,
        pageSize: 20,
      },
      evaluateData: [
        {
          id: null,
          content: "",
          accountId: null,
          title: "测试标题",
          labelId: "2",
          topping: 0,
          thumbsUpCount: 0,
          evaluateCount: 6,
          gmtCreate: null,
          gmtModified: null,
          status: null,
          text: null,
          image: null,
          accountName: "ming",
          logo: null,
          labelName: "RcsChat App",
          evaluates: [
            {
              id: 8,
              content: "测试评论1233",
              evaluateTo: null,
              accountId: null,
              replyCount: null,
              thumbsUpCount: null,
              gmtCreate: null,
              gmtModified: null,
              status: null,
              accountName: "yunxiaotian602",
              logo:
                "http://47.103.69.233:80/maap/resource/material/yunxiaotian602/image/jpeg/2020-11-19/160576823377805ec6.jpg",
              replies: null,
            },
          ],
        },
      ],
    };
  },
  computed: {
    ...mapState({
      id: (state) => state.user.id,
      name: (state) => state.user.name,
      token: (state) => state.user.token,
      avatar: (state) => state.user.avatar,
      myPostCount: (state) => state.user.myPostCount,
      myEvaluateCount: (state) => state.user.myEvaluateCount,
    }),
  },
  watch: {
    $route() {
      this.initRouter();
    },
  },
  created() {
    _this = this;
  },
  mounted() {
    this.initRouter();
  },
  methods: {
    initRouter() {
      var type = this.$route.params.type;
      if (type == "article") {
        this.activeName = "first";
        this.getPostList();
      } else if (type == "reply") {
        this.activeName = "second";
        this.getEvaluate();
      } else this.activeName = "first";
    },
    /**时间戳转中文 */
    getLocalTime(ns) {
      return getLocalTime(ns);
    },
    /**截取字符串 */
    formatter(text) {
      const max = 400;
      const textString = text.toString();
      if (textString.length > max) {
        return (
          `${textString.slice(0, max - 1)}...` +
          `<span style="color: #3f94ff;">阅读全文</span>`
        );
      }
      return text + `<span style="color: #3f94ff;">阅读全文</span>`;
    },
    back() {
      this.$router.push("/");
    },
    handleClick(tab, event) {
      var type = this.$route.params.type;

      console.log(tab.name, event);
      if (tab.name == "first" && type != "article") {
        this.$router.push("/person/article");
      } else if (tab.name == "second" && type != "reply") {
        this.$router.push("/person/reply");
      }
    },
    deletearticle() {
      _this.delete_Visible = true;
    },
    deletecomment() {
      _this.delete_Visible = true;
    },
    /**获取我的贴子 */
    getPostList() {
      let data = {
        pageNum: _this.postsListFrom.pageNum,
        pageSize: _this.postsListFrom.pageSize,
        labelId: _this.postsListFrom.labelId,
        accountId: _this.id,
      };
      console.log(data);
      postsList(data).then((res) => {
        console.log(res);
        _this.postsListData = res.data.list;
      });
    },
    /**获取评论 */
    getEvaluate() {
      // let data = _this.evaluateForm;
      let data = {
        accountId: _this.id,
        pageNum: _this.evaluateForm.pageNum,
        pageSize: _this.evaluateForm.pageSize,
      };
      getEvaluate(data).then((res) => {
        console.log("getEvaluate", res);
        _this.evaluateData = res.data.list;
      });
    },
  },
};
</script>


<style lang="less" scoped>
@import url(@/assets/css/home.less);
.content {
  position: relative;
  width: 1227px;
  margin: 0px auto 50px auto;
  .left {
    display: inline-block;
    width: 855px;
    margin-right: 29px;
    .person {
      width: 855px;
      background: #ffffff;
      box-shadow: 0px 0px 7px 0px #dfe1e7;
      border-radius: 4px;
      position: relative;
      .person-tags {
        padding: 30px 40px;

        .article,
        .reply {
          background: #ffffff;
          box-shadow: 0px 0px 7px 0px #dfe1e7;
          border-radius: 4px;
          .nocomment {
            text-align: center;
            padding: 50px 0px;
            img {
              width: 150px;
              margin-bottom: 20px;
            }
            .nocomment-text {
              width: 150px;
              margin: 0 auto;
              display: flex; /* 弹性布局 */
              justify-content: center;
              > div {
                width: 50%;
              }
              .nocomment-text-left {
                color: #606266;
              }
              .nocomment-text-right {
                cursor: pointer;
                color: #3f94ff;
              }
            }
          }
          .article-list {
            // padding: 0px 43px 0px;
            > .item {
              padding-top: 30px;
              .title {
                position: relative;
                height: 30px;
                margin-bottom: 15px;
                div {
                  display: inline-block;
                }
                .Topping {
                  color: #ec6756;
                  height: 30px;
                  line-height: 30px;
                  margin-right: 7px;
                  > i {
                    height: 9px;
                    font-size: 20px;
                    padding-right: 3px;
                  }
                }
                .name {
                  cursor: pointer;
                  font-size: 18px;
                  font-weight: 500;
                  color: #303133;
                  line-height: 30px;
                  letter-spacing: 1px;
                  // cursor: pointer;
                  font-family: PingFangSC-Medium, PingFang SC;
                  :link,
                  :visited {
                    color: #303133;
                  }
                  :hover {
                    color: #0055d6;
                  }
                }
                .tag {
                  position: absolute;
                  right: 0;
                  width: 89px;
                  background: #fdfeff;
                  border-radius: 3px;
                  border: 1px solid #d2d7e1;
                  padding: 0px 9px;
                  height: 30px;
                  font-size: 11px;
                  line-height: 30px;
                  text-align: center;
                }
              }
              .item-content {
                width: 770px;
                // height: 60px;
                font-size: 14px;
                font-weight: 400;
                color: #303133;
                margin-bottom: 20px;
                position: relative;
                .item-content-img {
                  float: left;
                  width: 175px;
                  height: 85px;
                  overflow: hidden;
                  box-sizing: border-box;
                  display: flex;
                  justify-content: center;
                  align-items: center;
                  margin-right: 10px;
                  img {
                    width: 100%;
                  }
                }
                .item-content-article {
                  line-height: 20px;
                  position: relative;
                  cursor: pointer;
                }
              }
              .item-bottom {
                height: 22px;
                position: relative;
                padding-bottom: 20px;
                // border-bottom: 1px solid #eceff5;
                > div {
                  display: inline-block;
                  margin-right: 20px;
                }
                > div:last-child {
                  margin-right: 0px;
                }
                .avatar {
                  // justify-content: center;
                  > img {
                    width: 22px;
                    height: 22px;
                    border-radius: 11px;
                    vertical-align: bottom;
                    margin-right: 9px;
                  }
                  .username {
                    font-size: 16px;
                    font-weight: 400;
                    color: #303133;
                    line-height: 22px;
                    letter-spacing: 1px;
                  }
                }
                .like,
                .comment {
                  color: #727786;
                  font-size: 12px;
                  > i {
                    margin-right: 5px;
                    cursor: pointer;
                    vertical-align: middle;
                  }
                  span {
                    display: inline-block;
                    line-height: 22px;
                  }
                }
                .delete {
                  color: #727786;
                  font-size: 12px;
                  cursor: pointer;
                  :hover {
                    color: #3f94ff;
                  }
                  span {
                    display: inline-block;
                    line-height: 22px;
                  }
                }
                .time {
                  position: absolute;
                  color: #727786;
                  right: 0;
                  > i {
                    margin-right: 5px;
                  }
                }
              }
              .item-comment {
                border-bottom: 1px solid #eceff5;
                .item {
                  position: relative;
                  .item-header {
                    padding-top: 15px;
                    position: relative;
                    margin-bottom: 15px;
                    .avatar {
                      > img {
                        width: 35px;
                        height: 35px;
                        border-radius: 50%;
                        vertical-align: bottom;
                        margin-right: 9px;
                      }
                      .username {
                        font-size: 16px;
                        font-weight: 400;
                        color: #0055d6;
                        line-height: 35px;
                        letter-spacing: 1px;
                      }
                    }
                    .time {
                      position: absolute;
                      color: #727786;
                      line-height: 35px;
                      top: 15px;
                      right: 0;
                    }
                  }
                  .item-content {
                    margin-bottom: 20px;
                    font-size: 14px;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #303133;
                    line-height: 20px;
                    position: relative;
                    .item-delete {
                      position: absolute;
                      right: 0;
                      bottom: 0;
                      color: #3f94ff;
                      cursor: pointer;
                    }
                  }
                  .option {
                    padding-bottom: 20px;
                    border-bottom: 1px solid #eceff5;

                    > div {
                      display: inline-block;
                      margin-right: 15px;
                    }
                    .like,
                    .comment {
                      color: #727786;
                      font-size: 12px;
                      > i {
                        margin-right: 5px;
                        cursor: pointer;
                        vertical-align: middle;
                      }
                      span {
                        display: inline-block;
                        line-height: 22px;
                      }
                    }
                  }
                  .item-comment-submit {
                    margin-left: 75px;
                    border-bottom: 1px solid #eceff5;
                    .avatar,
                    .textarea {
                      display: inline-block;
                      vertical-align: top;
                    }
                    .textarea {
                      width: calc(100% - 135px);
                    }
                    .submit {
                      position: relative;
                      height: 55px;

                      .button {
                        margin-top: 10px;
                        margin-bottom: 5px;
                        text-align: center;
                        position: absolute;
                        right: 90px;
                        width: 96px;
                        height: 40px;
                        line-height: 40px;
                        color: #fff;
                        background: #3f94ff;
                        border-radius: 4px;
                        cursor: pointer;
                      }
                    }
                  }
                  .item-comment-comment {
                    margin-left: 75px;
                  }
                  .more {
                    position: absolute;
                    text-align: center;
                    height: 100px;
                    width: 100%;
                    bottom: 0;
                  }
                }
              }
            }
          }
          .article-page {
            padding: 0px 43px 28px;
            .center {
              margin-top: 30px;
              text-align: center;
            }
          }
        }
        .article {
          .item {
            border-bottom: 1px solid #eceff5;
          }
        }
      }
    }
  }
}
.delete-text {
  text-align: center;
  display: block;
  width: 100%;
  font-size: 20px;
  line-height: 40px;
}
/deep/ .el-tabs__header {
  margin: 0;
}
/deep/ .el-tabs__item {
  font-size: 16px !important;
}
/deep/ .el-dialog__footer {
  text-align: center;
  button {
    width: 114px;
  }
}
</style>